import React, { Component, Fragment } from "react";
import TopNavBar from "@/components/TopNavBar";
import { MyDetail } from "./style";
import { connect } from "react-redux";
import * as actions from "@/store/user/actions"
class Fav extends Component {
  constructor(props) {
    super(props);
    if (this.props.token) return
    else{
      this.props.history.push("/login");
    }
  }

  state = {
    data: {
      name: "没有东西请添加",
      share_img: "xxx",
      all_click: "xxx",
      favorites: "xxx",
    },
  };

  getData=()=>{
    const data = JSON.parse(sessionStorage.getItem("detail"));
    this.setState({ data });
  }

  componentDidMount = () => {
    this.getData()
  };

  clickHandle = () => {
      sessionStorage.removeItem("detail");
    this.getData()
  };


  render() {
    const { data } = this.state;
    return (
      <Fragment>
        <TopNavBar {...this.props}>收藏</TopNavBar>
        {data &&
          [data].map((item) => {
            return (
              <div>
                <MyDetail>
                  <dt>
                    <img src={item.share_img} alt="" />
                  </dt>
                  <dd>
                    <h3>{item.name}</h3>
                    <p>
                      {item.all_click}浏览 &nbsp;{item.favorites}收藏
                    </p>
                  </dd>
                  <button onClick={this.clickHandle}>取消收藏</button>
                </MyDetail>
              </div>
            );
          })}
      </Fragment>
    );
  }
}

export default connect(state=>state.user.toJS(),actions)(Fav)
